﻿<template>
  <div class="app-container">
    <el-tabs style="margin:-10px -20px 0 -20px;" type="border-card" v-loading="loading" v-model="tabkey" @tab-click="TabClick">
      <el-tab-pane v-for="(tab,i) in tabList" :key="i" :label="tab.label" :name="tab.key" />
      <el-table :data="list" border fit highlight-current-row class="infotable" align="left">
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.ProductState==1" type="success" effect="plain">已上架</el-tag>
            <el-tag v-else-if="scope.row.ProductState==0" type="danger" effect="plain">删除</el-tag>
            <el-tag v-else-if="scope.row.ProductState==2" type="waring" effect="plain">未上架</el-tag>
            <el-tag v-else type="info" effect="plain">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="商品序号" align="center">
          <template slot-scope="scope">{{scope.row.ProductID}}</template>
        </el-table-column>

        <el-table-column label="商品编号" align="center">
          <template slot-scope="scope">{{scope.row.ProductNo}}</template>
        </el-table-column>
        
        
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">{{scope.row.ProductName}}</template>
        </el-table-column>
        <el-table-column label="商品数" align="center">
          <template slot-scope="scope">{{scope.row.Stock}}</template>
        </el-table-column>
        <el-table-column label="商品价格" align="center">
          <template slot-scope="scope">{{scope.row.ProductPrice}}</template>
        </el-table-column>
        <el-table-column label="商品类别" align="center">
          <template slot-scope="scope">{{scope.row.ProductKind}}</template>
        </el-table-column>
        
  

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click.native="onEdit(scope.row.ProductID)" >修改</el-button>
            <el-button v-if="scope.row.ProductState==1" size="mini" type="danger" plain @click.native="onValid(scope.row.ProductID,scope.row.ProductState)" >下架</el-button>
            <el-button v-else size="mini" type="primary" plain @click.native="onValid(scope.row.ProductID,scope.row.ProductState)" >上架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" style="margin-top:15px;float:right;">
        <el-pagination
          v-if="total > 0"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          :current-page="queryCondidate.page_index"
          :page-sizes="[5,10,20,30,50]"
          :page-size="queryCondidate.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-tabs>
  </div>
</template>
<script>

import shared from '@/shared';
import {getProductList,setProductState} from '@/api/product';

export default {
  components: {
    
  },
  data() {
    return {
      loading: false,
      tabkey: 'all',
      tabList: [
        {
          label: '全部',
          key: 'all'
        },
        {
          label: '未上架',
          key: '2'
        },
        {
          label: '已上架',
          key: '1'
        },
        {
          label: '删除',
          key: '0'
        }
      ],
      list: [],
      total: 0,
      queryCondidate: {
        page_index: 1,
        page_size: 10,
        condidate: {
          curmerchant: 0,
          tabkey: 'all'
        }
      },

    };
  },
  created() {
    this.TabClick();
  },
  methods: {
    GetList() {
      this.loading = true;
      getProductList(this.queryCondidate).then(response => {
        if (response.code == 0) {
          let pageData = response.data;
          this.list = pageData.list;
          this.total = pageData.total_item_count;
          let page = {
            total: this.total,
            size: this.queryCondidate.page_size,
            index: this.queryCondidate.page_index
          };
          this.$emit('page', page);
        } else {
          this.$message.error('获取列表出错！原因：' + response.msg);
        }
        this.loading = false;
      });
    },
    TabClick() {
      this.queryCondidate.page_index = 1;
      this.queryCondidate.condidate.tabkey = this.tabkey;
      this.GetList();
    },
    onEdit(id) {
      this.$emit('onedit', id);
    },
    onValid(id ,state) {
      var info=state==1?' 下架 ':' 上架 '
      this.$confirm('确认商品'+info+'吗？', '提示',{
        type: 'warning',
        callback: action => {
          if (action === 'confirm'){
            const data = { id, state }
            setProductState(data).then(rsp => {
              if (rsp.code ===0) {
                this.$message.success(info+'成功！')
                this.GetList()
              }else{
                this.$message.error(rsp.msg)
              }
            })
          }
        }
      } )
      //console.log('失效') 
    },
    
    //----当查询条件变化时由index.vue调用-------------------------------------------
    Query(qc) {
      this.queryCondidate.page_index = 1;
      this.queryCondidate.condidate = qc;
      this.GetList();
    },
    //------------------------------------------------
    onSizeChange(pageSize) {
      this.queryCondidate.page_size = pageSize;
      this.GetList();
    },
    onCurrentChange(pageIndex) {
      this.queryCondidate.page_index = pageIndex;
      this.GetList();
    },
    formatDateTime(datetime) {
      if (new Date(datetime).getTime() > new Date('1900-01').getTime()) {
        return shared.formatDateTime(datetime);
      }
      return '';
    },
  }
};
</script>

<style scoped>
.icosize {
  font-size: 16px;
  cursor: pointer;
}
.tabstop {
  margin-top: -25px;
}
</style>
